<template>
  <div class="login">
    <el-card class="box-card">
      <!-- 卡片头部 -->
      <div slot="header" class="clearfix">
        <span>登录</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toAddCookie">（添加cookie）</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toClearCookie">（清除cookie）</el-button>
        <el-button style="float: right; padding: 3px 0" type="text" @click="toView">没有账号</el-button>
      </div>
      <!-- 卡片内容 -->
      <div class="card-content">
        <!-- 表单 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <!-- <el-button>取消</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getKeyList } from '../util/pubApi'
export default {
  data() {
    return {
      // 声明登录表单数据
      form: {
        username: "",
        password: ""
      }
    };
  },
  methods: {
    toAddCookie(){
      localStorage.setItem('Authorization', '1235');
    },
    toClearCookie(){
      localStorage.removeItem('Authorization')
    },
    // 点击“没有账号”就跳转到注册页面
    toView() {
      // 通过什么就要和路由index.js的路由规则里的属性名对应
      // 通过name跳转到你的注册路由
      // this.$router.push({name:"zhuce"})
      // 通过path跳转到你的注册路由
    //   this.$router.push({ path: "/zhuce" });
        // ------------ separator -------------
    /*
    modules下storejs的取值、设值,首先将module.js引入main.js设值全局，否则this.$mymodule不可用
    */
        let data = {
          pattern: "*"
        }
        getKeyList(data).then(res => {
            console.log(res.data)
        });
        this.$ut1.pw(this.$token)
        // 另一个module
        this.$ut1.pw(this.$mymodule.state.b.name)
    },
    // 登录
    login() {
        /*
        单storejs的取值、设值
         */
    // 1.直接引用
    this.$ut1.pw('login.vue打印Vuex Token.js=>aa(common): ' + this.$token.state.aa);
    // 2.使用getter方法取值   // 3.==>登录成功
    this.$ut1.pw('login.vue打印Vuex Token.js=>aa(getter): ' + this.$token.getters.projectNameResult)

        var config = {
            method: 'post',
            url: '/prodproxy/user/md5login',
            headers: {
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                username: this.form.username,
                password: this.$md5(this.form.password)
            }
        };
      this.$http(config)
        .then(res => {
          console.log(res);  // 打印服务器响应信息
          if (res.data.statusCode == 1) {
            this.$message({
              message: "登录成功",
              type: "success"
            });
            // this.$router.push({ path: "/" });
            /**
             * 3.如果登录成功,写入token,以跳过路由守卫访问其他界面
             */
            this.$token.commit('changeLogin', 'tokenIs123456')
          } else {
            this.$message.error( res.data.msg);
          }
        })
        .catch(error => {
          this.$message.error("登录失败，请重试或者联系管理员" + error);
        });

    }
  }
};
</script>

<style lang="less">
</style>